<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/calender.css"  id="cssFile">
		<!-- <script src="../js/rem.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			window.onload = function(){
				 let isPc = true;// 默认pc端下
				 let css = document.getElementById('cssFile');
				 // 判断当前浏览器是否是在移动端
				 function mobileTerminal(){
					 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
					   console.log('移动端',navigator.userAgent);
					   if(isPc){
							isPc = false;
						    css.href  =  "../css/calenderMT.css";
					   };
					 } else {
						 console.log('pc端',navigator.userAgent);
						 if(!isPc){
							 isPc = true;
							 css.href  =  "../css/calender.css";
						 };
					 }
				 };
				 mobileTerminal();
				// // 实时监听页面变化
				// window.addEventListener("resize", function(e){
				// 	// console.log("监听页面变化",e)
				// 	mobileTerminal();
				// });
			}
		</script>
	</head>
	<body>
		<div class="calendar">
		  <div class="title">
			<div style="flex:1;text-align: center;line-height: 140px;">
				<!--  <span  onclick="lastYear()" class="iconfont icon-double-arrow-left time_icon" onmousemove="this.style.cursor='pointer';"></span>
				  <span  onclick="lastMonth()" class="iconfont icon-arrow-left time_icon"  onmousemove="this.style.cursor='pointer';"></span> -->
				  <span id ="ida-left" class="iconfont icon-double-arrow-left time_icon" onmousemove="this.style.cursor='pointer';"></span>
				  <span id="ia-left" class="iconfont icon-arrow-left time_icon"  onmousemove="this.style.cursor='pointer';"></span>
			  </div>
			<div style="flex:1">
				<h1 class="blue" id="calendar-title">Month</h1>
				<h2 class="blue small" id="calendar-year">Year</h2>
			</div>
		    <div style="flex:1;text-align: center;line-height: 140px;">
				<!-- <span  onclick="nextMonth()" class="iconfont icon-arrow-right time_icon" onmousemove="this.style.cursor='pointer';" ></span>
				<span  onclick="nextYear()" class="iconfont icon-double-arro-right time_icon" onmousemove="this.style.cursor='pointer';"></span> -->
		    <span id="ia-right"  class="iconfont icon-arrow-right time_icon" onmousemove="this.style.cursor='pointer';" ></span>
		    <span id="ida-right" class="iconfont icon-double-arro-right time_icon" onmousemove="this.style.cursor='pointer';"></span>
			</div>
		  </div>
		  <div class="body">
		    <div class="lightgrey body-list">
		      <ul>
		        <li>MON</li>
		        <li>TUE</li>
		        <li>WED</li>
		        <li>THU</li>
		        <li>FRI</li>
		        <li>SAT</li>
		        <li>SUN</li>
		      </ul>
		    </div>
		    <div class="darkgrey body-list">
		      <ul id="days">
		      </ul>
		    </div>
		  </div>
		  <div class="selectTime">
			  <span style="font-size: 15px;color:#a8a8a8 ;">选择时间：</span>
			  <input id="time" class="input_time" type="time" />
		  </div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="../js/calender.js"></script>
	</body>
</html>
